<template>
  <div class="cityBottom_bg">
    <p class="safe_box">
      <span class="dingwei_img" @click="dingweiBtn">
        <img src="@/assets/imgs/dingwei@2x.png" />
      </span>
    </p>
    <div class="city_bg" v-if="incityStatus==0">
      <!--选择起点-->
      <ul class="orderinformation_list">
        <li @click="selectStart">
          <md-icon class="place_icon" name="shangchedian" slot="left"></md-icon>
          <span
            v-if="incityStartPosition"
          >{{startLoading?"正在获取上车地点":incityStartPosition?incityStartPosition.stationName:""}}</span>
          <span v-else class="address_color">从哪出发</span>
        </li>
        <li @click="selectEnd">
          <md-icon class="place_icon" name="xiachedian" slot="left"></md-icon>
          <span v-if="incityEndPosition">{{incityEndPosition?incityEndPosition.stationName:""}}</span>
          <span v-else class="address_color">你要去哪儿</span>
        </li>
      </ul>
    </div>
    <!--选择起点后-->
    <div class="cnd_city_bg" v-if="incityStatus==1">
      <div class="end_left">
        <p>
          <img src="@/assets/imgs/snyc_xiache_icon.png" />
        </p>
      </div>
      <div class="end_ct">
        <h6>{{endLoading?"正在获取地点信息":incityEndPosition?incityEndPosition.stationName:""}}</h6>
        <p>{{endLoading?"":incityEndPosition?incityEndPosition.position:""}}</p>
      </div>
      <div :class="endOk?'end_right':'end_right_disable'" @click="confirmEnd">
        <p>确定</p>
      </div>
    </div>
    <!--确认叫车-->
    <div class="city_bg" v-if="incityStatus==2">
      <p class="use_mode_text">选择用车模式</p>
      <div class="use_mode">
        <use-mode-selector :modes="carType" @onSelect="getCardType" @showcostpage="onShowCostPage"></use-mode-selector>
        <!-- <md-scroll-view ref="scrollView" :scrolling-y="false" :auto-reflow="true" class="use_mode_item">
                    <div :class="{'use_mode_box_a':useModeA,'use_mode_box_b':useModeB}">
                        <div
                            class="use_mode_list"
                            :class="{ative:carTypeStyle==index}"
                            v-for="(item,index) in carType"
                            :key="index"
                            @click="getCardType(item.innerType,index,item.price,item.costPage)"
                        >
                            <h5>{{item.innerTypeName}}</h5>
                            <p v-if="item.innerType==1">
                                <img src="@/assets/imgs/cx_gwc.png">
                            </p>
                            <p v-if="item.innerType==2">
                                <img src="@/assets/imgs/cx_swc.png">
                            </p>
                            <p v-if="item.innerType==3">
                                <img src="@/assets/imgs/czc_icon.png">
                            </p>
                            <p v-if="item.innerType==4">
                                <img src="@/assets/imgs/czc_icon.png">
                            </p>
                            <h6>{{item.priceText}}</h6>
                        </div>
                    </div>
        </md-scroll-view>-->
      </div>
      <p class="use_p" v-if="IsCityNumber" @click="getCityNumber">
        <img src="@/assets/imgs/pc_pcrs.png" />
        <span>{{CityNumber}}</span>人乘车
      </p>
      <div v-if="IsRedMoney" class="taxi_type_hd">
        <p class="red_money" @click="getTimeBtn">
          <img src="@/assets/imgs/snkc_time@2x.png" />
          <span>{{incityTime}}</span>
        </p>
        <p class="red_money" @click="getRedMoneyBtn">
          <img src="@/assets/imgs/hb_icon@2x.png" />
          <span>红包</span>
          <b v-if="redMoney">{{redMoney}}元</b>
        </p>
      </div>

      <p class="use_btn" @click="ConfirmCallCarBtn">确认叫车</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import { Field, FieldItem, Icon, Toast, InputItem, ScrollView, Dialog } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Popup from '../popup';
import UseModeSelector from '@/components/usemodeselector/UseModeSelector';
export default {
  name: 'city-bottom',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView,
    [InputItem.name]: InputItem,
    [UseModeSelector.name]: UseModeSelector
  },
  props: {
    startLoading: {
      type: Boolean,
      default: false
    },
    endLoading: {
      type: Boolean,
      default: false
    },
    endOk: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      useModeA: true,
      useModeB: false,
      carType: [],
      carTypeStyle: 0, // 选中用车类型样式
      IsCityNumber: true,
      CityNumber: '1', // 拼车人数
      IsRedMoney: false,
      redMoney: '', // 红包
      incityTime: '现在'
    };
  },
  created() {},
  methods: {
    ...mapActions(['getIncityCarSite', 'getRedMoney', 'getappointment']),
    // 获取当前位置定位
    dingweiBtn() {
      this.$emit('dingweiBtn');
    },
    // 确认叫车
    ConfirmCallCarBtn() {
      this.$emit('ConfirmCallCarBtn');
    },
    selectStart() {
      this.$emit('selectStart');
    },
    selectEnd() {
      this.$emit('selectEnd');
    },
    confirmEnd() {
      if (this.endOk) {
        this.$emit('confirmEnd');
      } else {
        Toast({
          content: '该区域未开通服务，请在红色围栏内选择终点',
          position: 'bottom',
          icon: 'circle-alert',
          duration: 1000
        });
      }
    },
    // 根据URL获取对应的值
    getQueryString(url, name) {
      var reg = new RegExp('(^|\\?|&)' + name + '=([^&]*)(\\s|&|$)', 'i');
      if (reg.test(url)) return unescape(RegExp.$2.replace(/\+/g, ' '));
      return '';
    },
    // 选择叫车车类型
    getCardType(item) {
      let type = item.innerType;
      let index = item.index;
      let price = item.price;
      this.$store.commit('setIncityCarType', type);
      this.$store.commit('setIncityOrderMoney', price);
      if (type === '1') {
        this.IsCityNumber = true;
        this.IsRedMoney = false;
        this.CityNumber = '1';
        this.$store.commit('setIncityCarpoolingNumber', '1');
        this.confirmEnd();
      } else if (type === '2') {
        this.IsCityNumber = false;
        this.IsRedMoney = false;
      } else if (type === '3') {
        this.IsRedMoney = true;
        this.IsCityNumber = false;
      } else if (type === '4') {
        this.IsRedMoney = true;
        this.IsCityNumber = false;
      }
    },
    onShowCostPage(item) {
      let costpage = item.costPage;
      if (costpage && costpage != '') {
        sessionStorage['chargesOrderType'] = this.getQueryString(costpage, 'ordertype');
        sessionStorage['chargesMoney'] = this.getQueryString(costpage, 'orderamt');
        sessionStorage['chargesNumber'] = this.getQueryString(costpage, 'ordernum');
        sessionStorage['chargesCityId'] = this.getQueryString(costpage, 'cityid');
        sessionStorage['incitycityname'] = this.getQueryString(costpage, 'cityname');
        Popup.createIncityUnpaidChargesDetailsSelector();
      }
    },
    // 选择拼车时人数
    getCityNumber() {
      this.getIncityCarSite().then(() => {
        Popup.createCityNumberSelector().then(data => {
          this.$store.commit('setIncityCarpoolingNumber', data);
          this.confirmEnd();
          this.CityNumber = data;
        });
      });
    },
    // 出租车红包
    getRedMoneyBtn() {
      this.getRedMoney().then(() => {
        Popup.createCityRedMoneySelector().then(data => {
          console.log(data);
          this.$store.commit('setIncityRedMoney', data);
          this.redMoney = data;
        });
      });
    },
    // 出租车选择时间
    getTimeBtn() {
      this.getappointment().then(() => {
        Popup.createIncityTimeSelector().then(data => {
          console.log(data);
          if (data.momstart._i) {
            // 预约
            var time = this.getDay(data.momstart);
            this.incityTime = data.day + time;
            this.$store.commit('setIncityTime', data.momstart.format('x').toString());
            this.$store.commit('setTaxiTravelType', '2');
          } else {
            // 现在
            this.incityTime = '现在';
            this.$store.commit('setIncityTime', '');
            this.$store.commit('setTaxiTravelType', '1');
          }
        });
      });
    },
    getDay(time) {
      var times = new Date(time);
      var hour = times.getHours();
      var minute = times.getMinutes();
      return this.add(hour) + ':' + this.add(minute);
    },
    add(m) {
      return m < 10 ? '0' + m : m;
    }
  },
  watch: {
    incityStatus(value) {
      if (value === 2) {
        if (this.incityDoOrderInfo.length !== 0) {
          // if (this.incityDoOrderInfo.length === 2 || this.incityDoOrderInfo.length === 1) {
          //     this.useModeA = false;
          //     this.useModeB = true;
          // } else {
          //     this.useModeA = true;
          //     this.useModeB = false;
          // }
          if (this.incityDoOrderInfo.length === 2) {
            for (var j in this.incityDoOrderInfo) {
              this.incityDoOrderInfo[j].itemWidth = '30px';
            }
          } else {
            for (var i in this.incityDoOrderInfo) {
              this.incityDoOrderInfo[i].itemWidth = '0px';
            }
          }
          this.carType = this.incityDoOrderInfo;
          this.$store.commit('setIncityCarType', this.incityDoOrderInfo[0].innerType);
          if (this.incityDoOrderInfo[0].innerType === '1') {
            this.IsCityNumber = true;
            this.IsRedMoney = false;
            this.$store.commit('setIncityCarpoolingNumber', '1');
            this.CityNumber = '1';
          } else if (this.incityDoOrderInfo[0].innerType === '2') {
            this.IsCityNumber = false;
            this.IsRedMoney = false;
            this.$store.commit('setIncityCarpoolingNumber', '1');
            this.CityNumber = '1';
          } else if (this.incityDoOrderInfo[0].innerType === '3') {
            this.IsRedMoney = true;
            this.IsCityNumber = false;
          } else if (this.incityDoOrderInfo[0].innerType === '4') {
            this.IsRedMoney = true;
            this.IsCityNumber = false;
          }
          this.$store.commit('setIncityOrderMoney', this.incityDoOrderInfo[0].price);
        }
      }
    },
    incityDoOrderInfo() {
      if (this.incityDoOrderInfo.length !== 0) {
        if (this.incityDoOrderInfo.length === 2) {
          for (var k in this.incityDoOrderInfo) {
            this.incityDoOrderInfo[k].itemWidth = '30px';
          }
        } else {
          for (var x in this.incityDoOrderInfo) {
            this.incityDoOrderInfo[x].itemWidth = '0px';
          }
        }
        this.carType = this.incityDoOrderInfo;
        this.$store.commit('setIncityOrderMoney', this.incityDoOrderInfo[0].price);
        for (var i in this.carType) {
          this.carType[i].couponPrice = decryptByDESModeEBC(this.carType[i].couponPrice);
        }
      }
    }
  },
  computed: {
    ...mapGetters(['incityStatus', 'incityStartPosition', 'incityEndPosition', 'incityDoOrderInfo'])
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6, h5 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.taxi_type_hd {
  display: flex;
  justify-content: center;
}

.taxi_type_hd p {
  width: 50%;
}

.cityBottom_bg {
  position: absolute;
  bottom: 20px;
  z-index: 501;
  width: 100%;
}

.city_bg {
  background-color: #fff;
  border-radius: 10px;
  margin: 0px 20px;
}

.cnd_city_bg {
  background-color: #fff;
  border-radius: 10px;
  margin: 0px 20px;
  height: 120px;
}

.orderinformation_list {
  position: relative;
}

.orderinformation_list li {
  margin: 0px 30px;
  font-size: 26px;
  color: #666;
  height: 88px;
  line-height: 88px;
  border-bottom: solid 1px #E0E0E0;
}

.orderinformation_list li span {
  margin-left: 10px;
}

.orderinformation_list li span.address_color {
  color: #999;
}

.place_icon {
  width: 20px;
  height: 20px;
}

.safe_box {
  margin: 10px 20px;
  text-align: right;
}

.safe_box img {
  width: 56px;
  height: 56px;
}

.end_left {
  float: left;
}

.end_left p {
  margin-left: 20px;
  margin-top: 36px;
}

.end_left p img {
  width: 40px;
  height: 48px;
}

.end_ct {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}

.end_ct h6 {
  width: 400px;
  font-size: 26px;
  color: #333;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.end_ct p {
  width: 400px;
  font-size: 22px;
  color: #999;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.end_right {
  float: right;
  margin-right: 20px;
  margin-top: 26px;
}

.end_right p {
  width: 160px;
  height: 68px;
  line-height: 68px;
  background-color: #FF6917;
  text-align: center;
  font-size: 30px;
  color: #fff;
  border-radius: 6px;
}

.end_right_disable {
  float: right;
  margin-right: 20px;
  margin-top: 26px;
}

.end_right_disable p {
  width: 160px;
  height: 68px;
  line-height: 68px;
  background-color: #D8D8D8;
  text-align: center;
  font-size: 30px;
  color: #fff;
  border-radius: 6px;
}

.use_mode_text {
  text-align: center;
  font-size: 26px;
  color: #333;
  padding-top: 20px;
}

.use_mode {
  margin-top: 30px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

.use_mode_box_a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.use_mode_box_b {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.use_mode_item {
  display: flex;
}

.use_mode_list {
  width: 100%;
  height: 204px;
  padding: 0px 40px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 0px rgba(230, 229, 229, 1);
}

.use_mode_list.ative {
  border-bottom: solid 1px #FF6917;
}

.use_mode_list h5 {
  font-size: 26px;
  color: #666;
  font-weight: 400;
  text-align: center;
}

.use_mode_list h6 {
  font-size: 24px;
  color: #666;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
}

.use_mode_list p {
  text-align: center;
  margin-top: 10px;
}

.use_mode_list p img {
  width: 180px;
  height: 60px;
}

.use_p {
  text-align: center;
  height: 90px;
  line-height: 90px;
  font-size: 26px;
  color: #333;
}

.use_p img {
  width: 20px;
  height: 20px;
}

.use_p span {
  color: #FF6917;
}

.use_btn {
  text-align: center;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  background-color: #FF6917;
}

.red_money {
  text-align: center;
  height: 88px;
  line-height: 88px;
  font-size: 24px;
  color: #666;
}

.red_money img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 3px;
}

.red_money span {
  margin-left: 10px;
}

.red_money b {
  color: #FF6917;
  font-weight: 400;
}
</style>